﻿@page "/listview/default-functionalities"
@using Syncfusion.Blazor.Lists
@inherits SampleBaseComponent

<SampleDescription>
    <p>This sample demonstrates the default functionalities of the ListView. Click any item from the list to select and highlight it.</p>
</SampleDescription>
<ActionDescription>
   <p>The ListView component represents data in interactive hierarchical structure interface across different layouts or views, that also has the features such as data binding, template rendering, and grouping.</p>
   <p>The group list allows you to group the relevant items under a logical category by mapping the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/cref_files/blazor/Syncfusion.Blazor~Syncfusion.Blazor.Lists.ListViewFieldSettings~GroupBy.html'>GroupBy</a></code> field.</p>
   <p>In this sample, <b>Cars</b> are grouped based on their <b>Category</b>.</p>
</ActionDescription>

<div class="control-section">
    <div id="flat-list">
        <h4>Flat List</h4>
        <!-- ListView element -->
        <SfListView Enable="true" CssClass="listview" DataSource="@Data" TValue="DataModel">
            <ListViewFieldSettings TValue="DataModel" Id="ID" Text="Text"></ListViewFieldSettings>
        </SfListView>
    </div>
    <div id="group-list">
        <h4>Group List</h4>
        <!-- Group ListView element -->
        <SfListView CssClass="listviewgrp" DataSource="@ListData" TValue="DataModel">
            <ListViewFieldSettings TValue="DataModel" Id="ID" Text="Text" GroupBy="Category"></ListViewFieldSettings>
        </SfListView>
    </div>
</div>

@code{
     DataModel[] ListData =
    {
            new DataModel
            {
                Text = "Audi A4",
                ID = "9bdb",
                Category = "Audi"
            },
            new DataModel
            {
                Text = "Audi A4",
                ID = "9bdb",
                Category = "Audi"
            },
            new DataModel
            {
                Text = "Audi A5",
                ID = "4589",
                Category = "Audi"
            },

            new DataModel
            {
                Text = "Audi A6",
                ID = "e807",
                Category = "Audi"
            },
            new DataModel
            {
                Text = "Audi A7",
                ID = "a0cc",
                Category = "Audi"
            },
            new DataModel
            {
                Text = "Audi A8",
                ID = "5e26",
                Category = "Audi"
            },
            new DataModel
            {
                Text = "BMW 501",
                ID = "f849",
                Category = "BMW"
            },
            new DataModel
            {
                Text = "BMW 502",
                ID = "7aff",
                Category = "BMW"
            },
            new DataModel
            {
                Text = "BMW 503",
                ID = "b1da",
                Category = "BMW"
            },
            new DataModel
            {
                Text = "BMW 507",
                ID = "de2f",
                Category = "BMW"
            },
            new DataModel
            {
                Text = "BMW 3200",
                ID = "b2b1",
                Category = "BMW"
            }
    };
    DataModel[] Data =
     {
            new DataModel { Text = "Hennessey Venom", ID = "list-01" },
            new DataModel { Text = "Bugatti Chiron", ID = "list-02" },
            new DataModel { Text = "Bugatti Veyron Super Sport", ID = "list-03" },
            new DataModel { Text = "SSC Ultimate Aero", ID = "list-04" },
            new DataModel { Text = "Koenigsegg CCR", ID = "list-05" },
            new DataModel { Text = "McLaren F1", ID = "list-06" },
            new DataModel { Text = "Aston Martin One- 77", ID = "list-07" },
            new DataModel { Text = "Jaguar XJ220", ID = "list-08" },
            new DataModel { Text = "McLaren P1", ID = "list-09" },
            new DataModel { Text = "Ferrari LaFerrari", ID = "list-10" },
            new DataModel { Text = "Mercedes-Benz Aston Martin", ID = "list-11" },
            new DataModel { Text = "Zenvo ST1", ID = "list-12" },
            new DataModel { Text = "Lamborghini Veneno", ID = "list-13" }
    };

    class DataModel
    {
        public string Text { get; set; }
        public string ID { get; set; }
        public string Category { get; set; }
    }
}

<style>
    .listview, .listviewgrp {
        border: 1px solid #dddddd;
        border-radius: 3px;
    }

    .control-section {
        overflow: auto;
    }

    #flat-list,
    #group-list {
        width: 49%;
        margin: auto;
        margin-bottom: 15px;
    }

        #flat-list h4, #group-list h4 {
            padding-left: 16px;
        }

    #flat-list {
        float: left;
        padding-left: 16px;
    }

    #group-list {
        float: right;
        padding-right: 16px;
    }
</style>